<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Fingerprint status</h2>
      <p>Showing a status message with a purely decorative icon</p>
      <mat-icon class="align-middle" color="primary">fingerprint</mat-icon>
      Your fingerprint was recorded!
    </section>

    <section>
      <h2>Delete icon button</h2>
      <p>Showing a button with interactive icon which can perform an action</p>
      <button mat-icon-button aria-label="Delete" (click)="deleteIcon()">
        <mat-icon color="accent">delete</mat-icon>
      </button>
    </section>

    <section>
      <h2>Home link</h2>
      <p>Showing a link with interactive icon</p>
      <a mat-icon-button aria-label="Home" href="http://www.google.com">
        <mat-icon color="warn">home</mat-icon>
      </a>
    </section>

    <section>
      <h2>Done status</h2>
      <p>Showing a status indicator with an indicator icon</p>
      <mat-icon class="align-middle" color="primary">done</mat-icon>
      <span class="cdk-visually-hidden">Done</span>
      Tasks
    </section>
  </mat-card-content>
</mat-card>
